<template>
	<view class="studcontent">
		<view class="topsearch">
			<u-row gutter="16">
				<!-- <u-col span="3">
					<u-row gutter="16">
						<u-col span="3">
							<u-icon name="map" color="#2979ff" size="20"></u-icon>
						</u-col>
						<u-col span="9" style="color: 2979ff;">
							北京市
						</u-col>
					</u-row>
				</u-col> -->
				<u-col span="12">
					<u-search @search='search' @custom='search' @clear='clear' placeholder="请输入研学机构名称"
						v-model="info.activityTitle" :show-action="true" action-text="搜索" :animation="true"
						bg-color='#red' shape='round'></u-search>
				</u-col>

			</u-row>
		</view>
		<view class="">
			<u-empty v-if="studyList==0" mode="list" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
			<view v-for="(item,index) in studyList" :key="index" class="studheader">
					<navigator :url="'/pages/Studyabroad/insureInfo?belongId={{item.id}}'" hover-class="navigator-hover">
					<u-row gutter="16">
						<!-- <u-col span="3">
						<image class="studheaderimg"
							src="https://img0.baidu.com/it/u=3526127985,524286303&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067"
							mode=""></image>
					</u-col> -->
						<u-col span="12">
							<view class="studheadertitle">{{item.activityTitle}}</view>
							<view class="studheadertitl1">
								<span>{{item.planFee}}</span><span class="studheadertitl1_a">{{item.planPrice}}</span>
								<!-- <span>方案二</span><span class="studheadertitl1_a">12元</span> -->
							</view>
							<!-- 	<view class="studheadertitl1">
							<span>方案三</span><span class="studheadertitl1_a">10元</span>
							<span>方案四</span><span class="studheadertitl1_a">12元</span>
						</view> -->
							<view class="studheadertime">活动时间：{{item.beginTime}}~{{item.endTime}}</view>
						</u-col>
					</u-row>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		wxList
	} from '../../api/login.js'
	export default {
		data() {
			return {
				info: {
					activityTitle: '',
					sysDeptId: ''
				},
				studyList: []
			}
		},
		mounted() {

		},
		onLoad: function(option) {
			this.info.sysDeptId = option.deptId
			this.instlist()
		},
		methods: {
			async instlist() {
				uni.showLoading({
					title: '加载中'
				});
				// 研学机构
				await wxList(this.info).then(res => {
					uni.hideLoading();
					this.studyList = res.rows
				})
			},
			search(e) {
				uni.showLoading({
					title: '查询中'
				});
				this.instlist()
			},
			clear() {
				this.info.activityTitle = ''
				this.instlist()
			}
		}
	}
</script>

<style lang="scss">
	.studcontent {
		width: 100%;
		height: 100vh;
		overflow: auto;
		background-color: #F5F8FA;
	}

	.topsearch /deep/.u-row {
		height: 69rpx;
		line-height: 69rpx;
		overflow: hidden;
		margin-right: 0 !important;
		// margin-left: -10rpx !important;
	}

	.topsearch {
		width: 94%;
		background-color: #fff;
		border-radius: 35rpx;
		margin: 3%;

	}

	.u-search {
		background-color: #fff;
		border-radius: 35rpx;
	}

	.studheader {
		width: 90%;
		// height: 278rpx;
		background: #fff;
		overflow: hidden;
		padding: 5%;
		margin-bottom: 15rpx;
	}

	.studheaderimg {
		width: 158rpx;
		height: 219rpx;
		border-radius: 7rpx;
	}

	.studheadertitle {
		font-weight: bold;
		font-size: 31rpx;
		color: #333333;
		line-height: 37rpx;
		margin-bottom: 20rpx;
	}

	.studheadertitl1 {
		font-size: 22rpx;
		color: #666666;
		line-height: 40rpx;
		// margin-top: 0rpx;
	}

	.studheadertitl1_a {
		font-size: 37rpx;
		color: #F86E13;
		line-height: 36rpx;
		font-weight: bold;
		margin-right: 60rpx;
		margin-left: 10rpx;
	}

	.studheadertime {
		font-size: 22rpx;
		color: #999999;
		line-height: 26rpx;
		margin-top: 20rpx;
	}
</style>